﻿/*Home*/
@font-face {
    font-family: typerighter; /*a name to be used later*/
    src:url(/Content/font/rm_typerighter_old.ttf) ;
}
div#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}
a:focus,a:hover,a:visited {
    text-decoration: none;
	border:none;
	
}
*, *:focus {
outline: none;
}

img, img:focus, img::-moz-focus-inner, a::-moz-focus-inner {
border: 0;
outline: none;
}

a:hover, a:active, a:focus, img, img:focus {
outline: none;
-moz-outline-style: none;
}

:-moz-any-link:focus {
outline: none;
}
  
body.body-home {
    background: url(/Images/bg-home1.png) top center no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    margin: 0;
    background-color: transparent;
}
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('/images/page-loader.gif') 50% 50% no-repeat rgb(255,255,255);
}
.body-home .modal-backdrop.in {
    opacity: .3;
}
h1.logo {
    position: absolute;
    top: 0;
    left: 3%;
    width: 14%;
    height: 21.71%
}
h1.logo img {
    width: 100%;
    height: 100%;
}
.banan {
    width: 31.5%;
    height: 50.9%;
    position: absolute;
    top:46.4%;
    left: 5.2%;
}
.banan img {
    width: 100%;
    height: 100%;
}
.thucdon {
    width: 7.3%;
    height: 16.2%;
    position: absolute;
    top:48%;
    left: 23%;    
}
.thucdon img,.tranh-1 img,.tranh-2 img ,.tranh-3 img,.dienthoai img,.camera img, .monan img {
    width: 100%;
    height: 100%;
     -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.thucdon img:hover,.tranh-1 img:hover,.tranh-2 img:hover,.tranh-3 img:hover ,.dienthoai img:hover,.camera img:hover{
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}
.tranh-1 {
    width: 16.9%;
    height: 22.45%;
    position: absolute;
    top: 4.8%;
    left: 23%;
}
.tranh-2 {
    width: 15.6%;
    height: 21.4%;
    position: absolute;
    top: 4.8%;
    left: 40%;
}
.tranh-3 {
   width: 16.8%;
    height: 22.75%;
    position: absolute;
    top: 25%;
    left: 34%;
}
.cuaso {
    width: 22%;
    height: 40.4%;
    position: absolute;
    top: 11.2%;
    right: 8.4%;
}
.cuaso img {
    width: 100%;
    height: 100%;
}
.bandedo {
    width: 23.4%;
    height: 26.95%;
    position: absolute;
    bottom: 12%;
    right: 8%;
}
.bandedo img {
    width: 100%;
     height: 100%;
}
.dienthoai {
    width: 7.3%;
    height: 11.83%;
    position: absolute;
       bottom: 26.8%;
    right: 23.7%;   
}
.camera {
    width: 7%;
    height: 11.68%;
    position: absolute;
    bottom: 26.5%;
    right: 12%;   
}
.thucdon .letter-container.menu-hover {
    top: 55%;
    left: 30%;
}
.tranh-1 .letter-container {
    top: 20%;
    left: 28%;
}
.tranh-2 .letter-container {
    top: 20%;
    left: 45%;
}
.tranh-3 .letter-container {
    top: 40%;
    left: 42%;
}
.dienthoai .letter-container {
    bottom: 37%;
    right: 24.5%;
}
.camera .letter-container {
    bottom: 26%;
    right: 12%
}
.letter-container {
        position: fixed;
    }
.footer-home {
    position: fixed;
    bottom: 0;
        line-height: 60px;
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.55);
    padding: 0 6% 0 5%;
        z-index: 3;
}
.footer-home ul.sns-area {
    list-style: none;
    line-height: 60px;
    
}
.footer-home ul.sns-area li {
    list-style: none;
    width: 40px;
    float: left;
    margin: auto 12px;
}
.footer-home ul.sns-area li img {
    opacity: 0.8;
}
.footer-home ul.sns-area li:hover img {
    opacity: 1;
}
.footer-home a span {
        width: 73px;
            margin: 13px 60px 13px 0;
    height: 33px;
    float: left;
    border: 1px #fff Solid;
    line-height: 33px;
    color: #fff;
    text-align: center;
}
.monan {
    width: 11.71%;
    height: 23.95%;
    position: absolute;
      
}
.monan-1 {
    top: 24.1%;
    left: 30.3%; 
}
.monan-2 {
    top: 24.1%;
    left: 43.84%; 
}
.monan-3 {
    top: 24.1%;
    left: 57.38%; 
}
.monan-4 {
    top: 48%;
    left: 30.3%;
}
.monan-5 {
    top: 48%;
    left: 43.84%; 
}
.monan-6 {
    top: 48%;
    left: 57.38%;
}
.monan .popup-monan1,.monan .popup-monan2,.monan .popup-monan3,.monan .popup-monan4,.monan .popup-monan5,.monan .popup-monan6 {
    width: 0;
    overflow: hidden;
    height: 28.44%;
    background: url(/Images/bg-detailmenu.png) no-repeat;
    background-size: cover;
    position: fixed;
    -webkit-transition: width 0.7s;
    transition: width 0.7s;
}
.monan .popup-monan1 img,.monan .popup-monan2 img,.monan .popup-monan3 img,.monan .popup-monan4 img,.monan .popup-monan5 img,.monan .popup-monan6 img{
    width: 100%;
    height: 100%;
}
.monan:hover .popup-monan1,.monan:hover .popup-monan2,.monan:hover .popup-monan3,.monan:hover .popup-monan4,.monan:hover .popup-monan5,.monan:hover .popup-monan6 {
    width: 24.16%;
}
.popup-monan1 {
    top: 15%;
    left: 39%;
    z-index: 1;
}
.monan .popup-monan1 .letter-container {
     top: 15%;
    left: 39%;
}
.popup-monan2 {
    top: 15%;
    left: 52.5%;
    z-index: 1;
}
.monan .popup-monan2 .letter-container {
     top: 15%;
    left: 52.5%;
}
.popup-monan3 {
    top:15%;
    left: 66%;
    z-index: 1;
}
.monan .popup-monan3 .letter-container {
     top: 15%;
    left: 66%;
}
.popup-monan4 {
    top: 38.5%;
    left: 39%;
    z-index: 1;
}
.monan .popup-monan4 .letter-container {
     top: 38.5%;
    left: 39%;
}
.popup-monan5 {
    top: 38.5%;
    left: 52.5%;
    z-index: 1;
}
.monan .popup-monan5 .letter-container {
     top: 38.5%;
    left: 52.5%;
}
.popup-monan6 {
    top: 38.5%;
    left: 66%;
    z-index: 1;
}
.monan .popup-monan6 .letter-container {
     top: 38.5%;
    left: 66%;
}
.monan .letter-container {
    text-align: left;
    width:  24.16%;
    height: 28.44%;
    padding: 3% 0 0 4.5% ;
}


.monan .letter-container p.title-monan a span {
    color: #333333;
    text-align: left;
     font-size: 23px;
        font-weight: bold;
}
.monan .letter-container p.description-monan a span {
    color: #A7131E;
    font-size: 20px;
    text-align: left;
}
    .monan .letter-container p a {
        text-align: left;
        margin: 0
    }
    .monan .letter-container p {
        margin: 0;
    }
    .monan .letter-container p a span {
	color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-animation: sharpen 0s linear backwards;
	-moz-animation: sharpen 0s linear backwards;
	-ms-animation: sharpen 0s linear backwards;
}
    .btn-backhome {
        width: 4.4%;
        height: 6.74%;
        position: absolute;
        top: 6%;
        right: 3.3%;
        opacity: 0.8;
    }
    .btn-backhome img {
        width: 100%;
        height:100%;       
    }
    .btn-backhome:hover {
        opacity: 2;
    }

    .btn-nextmenu,.btn-backmenu {
        width: 110px;
        height: 43px;
        position: absolute;
        bottom: 15%;        
        opacity: 1;
    }   
    .btn-nextmenu img,.btn-backmenu img  {
        width: 100%;
        height:100%;       
    }
    .btn-nextmenu:hover,.btn-backmenu:hover {
        opacity: 0.9;
    }
    .btn-nextmenu p,.btn-backmenu p  {
        color: #ffffff;
        font-family: 'Patrick Hand SC', cursive;
        font-size: 19px;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 40px;
        margin: 0;
    }
    .btn-nextmenu {
        right: 16%;
    }
    .btn-nextmenu p {
        text-align: right;
        padding: 0 25px 0 0
    }
    .btn-backmenu {
        left: 16%;
    }
    .btn-backmenu p {
        text-align: left;
        padding: 0 0 0 20px
    }
    .btn-backmenu p:hover,.btn-nextmenu p:hover {
        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
.slider {
    width: 5.12%;height: 10.48%;position: fixed;
}
.slider img {
    width: 100%;
    height: 100%;
}
#slider1 {
    top: 45%;
    left: 26%;
}
#slider2 {
     top: 3.5%;
    left: 24%;
}
#slider3 {
     top: 3.5%;
    left: 38%;
}
#slider4 {
     top: 23%;
    left: 45%;
}
#slider5 {
    bottom: 28%;
    right: 22%;   
}
#slider6 {
    bottom: 29%;
    right: 11%; 
}
.maychu {
    width: 39.17%;
    height: 51.65%;
    position: absolute;
    top: 48%;
    left: 30.41%;
    z-index: 2;
}
.maychu img {
    width: 100%;
    height: 100%;
}
.about:hover .about-content{
    bottom: 0;
    
}
.about {
    overflow: hidden;bottom: 48%;position: absolute;width: 100%;height: 40%;
}
.about-content {
       width: 31%;
    height: 100%;
    left: 33.8%;
    position: absolute;
    bottom: -100%;
    -webkit-transition: bottom 20s;
    transition: bottom 20s;
    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
}
.about-content img {
    width:100%; height:100%;position: absolute;z-index: 0;
}
.about-content p {
        position: absolute;
    z-index: 1;
    padding: 5% 10% 5%;
    text-align: justify;
    font-size: 15px;
    color: black;
}
